<template>
  <view class="page" v-if="enterprise">
    <view class="enter-top xb-card">
      <view class="enter-top-t">
        <view>{{ enterprise.enterpriseName }}</view>
        <view class="en-adds" v-if="enterprise.address">
          <u-icon name="map-fill" color="#B6B6B6"></u-icon>
          <text class="en-adds-txt">{{ enterprise.address || '-' }}</text>
        </view>
      </view>
      <view class="enter-top-b">
        <view class="enter-top-b-col">
          <view>法人代表人</view>
          <view>{{ enterprise.legalPerson || '-' }}</view>
        </view>
        <view class="enter-top-b-col">
          <view>行业类型</view>
          <view>{{ enterprise.enterpriseType || '-' }}</view>
        </view>
        <view class="enter-top-b-col">
          <view>生产类别</view>
          <view>{{ enterprise.productionType || '-' }}{{
              enterprise.productionType || '-'
            }}{{ enterprise.productionType || '-' }}
          </view>
        </view>
      </view>
    </view>

    <view class="qy-c xb-card">
      <view class="qy-c-t">
        <text>联系人</text>
        <text>{{ enterprise.enterpriseContact }}</text>
      </view>
      <view class="qy-c-b">
        <text>联系电话</text>
        <text>{{ enterprise.contactPhone }}</text>
      </view>
    </view>

    <view class="qy-b">
      <view class="qy-b-c">
        <view v-for="(item,index) in menus" :key="index"
              :class="{line:((index+1)%3!=0)&&index!=menus.length-1,rowLine:index>= (menus.length - menus.length%3)}"
              @click="clickFns(item)">
          <img src="" alt="">
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "qyFns",
  data() {
    return {
      enterprise: null,
      menus: [{
        name: '退租记录',
      },
        {
          name: '租赁记录',
        }
      ]
    }
  },
  onLoad() {
    let enter = uni.getStorageSync('enterprise')
    this.enterprise = enter
  },
  methods: {
    clickFns(item) {
      switch (item.name) {
        case '退租记录':
          this.navTo(
              `/pagesBusiness/bill/qyRefundBillList?enterpriseName=${this.enterprise.enterpriseName}`
          );
          break;
        case '租赁记录':
          this.navTo(
              `/pagesBuilding/leases/leaseHistory?enterpriseName=${this.enterprise.enterpriseName}`
          );
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.enter-top-t {
  position: relative;
  padding-bottom: 28rpx;

  view:nth-child(1) {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    line-height: 42rpx;
  }

  .en-adds {
    display: flex;
    align-items: center;
    margin-top: 13rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #999999;
    line-height: 30rpx;

    .en-adds-txt {
      margin-left: 4rpx;
    }
  }

  &:after {
    content: "";
    position: absolute;
    background: #eee;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rpx;
  }
}

.enter-top-b {
  margin-top: 30rpx;
  width: 100%;
  display: flex;

  .enter-top-b-col {
    flex: 1;
    height: 90rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;

    view:nth-child(1) {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
      line-height: 32rpx;
    }

    view:nth-child(2) {
      width: 100%;
      text-align: center;
      margin-top: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #666666;
      padding: 0 10rpx;
      line-height: 32rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 40rpx;
      background: #EEEEEE;
    }

    &:last-child {
      &:after {
        content: "";
        display: none;
      }
    }
  }
}

.qy-c {
  margin-top: 20rpx;

  view {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text:nth-child(1) {
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      line-height: 33rpx;
    }
  }

  .qy-c-t {
    position: relative;
    padding-bottom: 26rpx;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #eee;
    }

    text:nth-child(2) {
      color: #000000;
      line-height: 33rpx;
    }
  }

  .qy-c-b {
    padding-top: 24rpx;

    text:nth-child(2) {
      color: #32C156;
      line-height: 33rpx;
    }
  }
}

.qy-b {

  .qy-b-c {
    margin-top: 20rpx;
    border-radius: 12rpx;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    view {
      border-bottom: 1px solid #eee;
      position: relative;
      width: 100%;
      height: 236rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
        width: 70rpx;
        height: 70rpx;
        background: #F6F9F7;
        border-radius: 10rpx;
      }
    }

    .line {
      &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 176rpx;
        background: #eee;
      }
    }
  }

  .rowLine {
    border: none !important;
  }

}
</style>
